<template>
  <div class="hyydxq">
    <div class="toAskThe">
      <div>
        <img width="20px" height="20px" src="../../assets/img/ask.png" />
        <span>{{ objContent.createTime }}</span>
      </div>
      <div>
        <div>
          <div>
            <img
              v-if="!!objContent.userInfo && !!objContent.userInfo.headPortrait"
              :src="objContent.userInfo.headPortrait | imgPaths"
            />
            <img v-else src="../../assets/img/mrtx.png" />
            <span>{{ mobilePhone | hidePhone }}</span>
          </div>
          <p>{{ (!!objContent.typeName && objContent.typeName) || '' }}</p>
        </div>
        <div>
          <p>{{ objContent.content }}</p>
          <div v-if="images.length > 0">
            <img
              v-for="(item, key) in images"
              :key="key"
              width="72px"
              @click="openImg(key)"
              height="72px"
              :src="item"
            />
          </div>
        </div>
      </div>
    </div>
    <div style="padding-bottom: 15px">
      <div v-for="(items, keys) in objContent.questionReplyInfoModels" :key="keys" class="replyContent">
        <div>
          <div>
            <div>
              <img :src="items.subjectExpertInfo.photo | imgPaths" />
              <span>{{ items.subjectExpertInfo.phone | hidePhone }}</span>
              <p>{{ items.subjectExpertInfo.expertTitle.title }}</p>
              <div>{{ items.subjectExpertInfo.workUnit }}</div>
            </div>
            <p>
              {{ items.replyStatus == 1 ? items.subjectExpertInfo.expertTitle.updateTime.split(' ')[0] : '未回复' }}
            </p>
          </div>
          <div v-if="items.replyStatus == 1">
            <div><img width="20px" height="20px" src="../../assets/img/huida.png" /></div>
            <div>
              <p>{{ items.replyContent }}</p>
              <div v-if="items.uploadImgs.length > 0">
                <img
                  v-for="(item, key) in items.uploadImgs"
                  :key="key"
                  width="72px"
                  height="72px"
                  @click="magnifyPicture(items.uploadImgs,key)"
                  :src="item | imgPaths"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-image-preview v-model="show" :startPosition="index" swipeDuration="500" :images="images" @change="onChange">
      <template v-slot:index>第{{ index + 1 }}页</template>
    </van-image-preview>
  </div>
</template>

<script>
//保养记录
import { getValue, setValue } from '@/utils/auth'
import {
  Toast,
  Cell,
  CellGroup,
  Popup,
  Picker,
  DatetimePicker,
  PullRefresh,
  List,
  Search,
  RadioGroup,
  Radio,
  ImagePreview,
  Field,
  Button
} from 'vant'
import { getHandle, postHandle } from '@/api'
import UploadImg from '@/components/uploadImg'
import { imgPaths } from '../../filters'
import dayjs from 'dayjs'
export default {
  components: {
    UploadImg,
    [Field.name]: Field,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [PullRefresh.name]: PullRefresh,
    [Toast.name]: Toast,
    [List.name]: List,
    [Search.name]: Search,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [ImagePreview.Component.name]: ImagePreview.Component,
    [Button.name]: Button
  },
  data() {
    return {
      id: getValue('hfxxid') || '',
      show: false,
      index: 0,
      images: [],
      objContent: {},
      fileInfoList: [],
      content: '',
      mobilePhone: '',
      loading: false,
      replyId: '',
      loginUserId: getValue('loginUserId'),
      questionReplyInfoModels: []
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.Initialize()
  },
  methods: {
    Initialize() {
      getHandle(`/agri/api/common/questionInfo/queryDetail/${this.id}`).then(res => {
        if (res.status == 0) {
          this.objContent = res.data
          this.mobilePhone = (!!res.data.userInfo && res.data.userInfo.mobilePhone + '') || ''
          this.questionReplyInfoModels = res.data.questionReplyInfoModels
          if (this.questionReplyInfoModels.length > 0) {
            this.questionReplyInfoModels.forEach(item => {
              item.uploadImgs = !!item.uploadImgs ? item.uploadImgs.split(',') : []
            })
          }
          let images = !!res.data.uploadImgs ? res.data.uploadImgs.split(',') : []
          // let images = [
          //   '/fms/api/show/54e213f2-23a2-4bef-9658-da64e06b81e1_0/teacher.png',
          //   '/fms/api/show/54e213f2-23a2-4bef-9658-da64e06b81e1_0/teacher.png',
          //   '/fms/api/show/54e213f2-23a2-4bef-9658-da64e06b81e1_0/teacher.png',
          //   '/fms/api/show/54e213f2-23a2-4bef-9658-da64e06b81e1_0/teacher.png',
          //   '/fms/api/show/54e213f2-23a2-4bef-9658-da64e06b81e1_0/teacher.png'
          // ]
          this.images = images.map(item => {
            return imgPaths(item)
          })

          // imgPaths
        }
      })
    },
    onChange(index) {
      this.index = index
    },
    openImg(key) {
      this.index = key
      this.show = true
    },
    magnifyPicture(list,key){
     let images =  list.map((item)=>{
         return item = process.env.VUE_APP_FILE_SERVER_API + item
      })
      ImagePreview({
          images,
          startPosition: key,
        });
    }
  }
}
</script>

<style lang="scss" scoped>
.tip {
  color: #999999;
  font-size: 13px;
}
.van-cell::after {
  border-bottom: 1px solid #fff;
}
::v-deep .van-field__body {
  border: 1px solid #eeeeee;
  padding: 8px;
  border-radius: 4px;
}
.van-cell {
  padding: 5px 16px;
  margin-bottom: -5px;
}
.replyMessage {
  margin-top: 10px;
  background-color: #fff;
  > p {
    padding: 10px 16px 5px;
    color: #333333;
    font-size: 15px;
  }
}
.replyContent {
  background-color: #fff;
  margin-bottom: 5px;
  > div {
    &:first-child {
      padding: 0 15px 10px;
      > div {
        &:first-child {
          height: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          > div {
            display: flex;
            align-items: center;
            img {
              width: 28px;
              height: 28px;
              border-radius: 14px;
              margin-right: 5px;
            }
            > span {
              font-size: 15px;
              color: #333333;
            }
            > p {
              padding: 1px 8px;
              background: rgba(55, 181, 181, 0.2);
              border-radius: 2px;
              font-size: 12px;
              font-weight: 400;
              color: #37b5b5;
              // line-height: 20px;
              text-align: center;
              margin-left: 10px;
            }
            > div {
              // float: left;
              position: absolute;
              margin-left: 35px;
              margin-top: 37px;
              font-weight: 400;
              color: #666666;
              font-size: 13px;
            }
          }
          > p {
            font-size: 13px;
            color: #666666;
          }
        }
        &:last-child {
          //   background-color: #f7f7f7;
          border-radius: 4px;
          padding: 10px;
          padding-left: 0px;
          display: flex;
          > div {
            &:first-child {
              margin-right: 9px;
              margin-left: 3px;
            }
            &:last-child {
              > p {
                font-size: 13px;
                font-weight: 400;
                color: #666666;
                line-height: 20px;
              }
              > div {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                > img {
                  margin-top: 10px;
                }
                // justify-content: flex-start
              }
              > div::after {
                content: '';
                width: 72px;
              }
            }
          }
        }
      }
    }
  }
}
.toAskThe {
  background-color: #fff;
  margin-bottom: 10px;
  > div {
    &:first-child {
      display: flex;
      align-items: center;
      height: 50px;
      border-bottom: 1px solid #eeeeee;
      padding: 0 15px;
      > span {
        font-size: 14px;
        color: #999999;
        margin-left: 10px;
      }
    }
    &:last-child {
      padding: 0 15px 10px;
      > div {
        &:first-child {
          height: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          > div {
            display: flex;
            align-items: center;
            img {
              width: 28px;
              height: 28px;
              border-radius: 14px;
              margin-right: 5px;
            }
            > span {
              font-size: 15px;
              color: #333333;
            }
          }
          > p {
            font-size: 13px;
            color: #666666;
          }
        }
        &:last-child {
          background-color: #f7f7f7;
          border-radius: 4px;
          padding: 10px;
          > p {
            font-size: 13px;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
          }
          > div {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            > img {
              margin-top: 10px;
            }
            // justify-content: flex-start
          }
          > div::after {
            content: '';
            width: 72px;
          }
        }
      }
    }
  }
}
.add-btn {
  padding-bottom: 10px;
}
</style>
